<template>
  <div>
	
	<myheader></myheader>
	<!-- 面包屑导航 -->
	<Breadcrumb :datas = 'datas'></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">
			<!-- 用户头像 -->
			<Avatar :src='src' :width='150' fit='fill'></Avatar>

			<!-- 视频地址 -->
			<video id="video" v-show="videosrc" :src="videosrc" width="400" height="240" controls='controls' autoplay='autoplay' muted></video>

			<br>

			<Button @click="changepic" color='red'>{{ mybutton }}</Button>	

			<table>
				<tr>
					<td style="padding:5px;">
						密码：
					</td>
					<td style="padding:5px;">
						<input type="password" v-model="password">
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						确认密码：
					</td>
					<td style="padding:5px;">
						<input type="password" v-model="password1">
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						头像上传：
					</td>
					<td style="padding:5px;">
						<input type="file" @change="upload">
					</td>
				</tr>
				<!-- <tr>
					<td style="padding:5px;">
						视频上传：
					</td>
					<td style="padding:5px;">
						<input type="file" @change="upload">
						上传视频
              			<video :src="src" :width="400" autoplay="autoplay" controls="controls"></video>
					</td>
				</tr> -->
				<tr>
					<td style="padding:5px;">
						七牛云上传：
					</td>
					<td style="padding:5px;">
						<input type="file" @change="upload_qiniu">
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						进度展示：
					</td>
					<td style="padding:5px;">
						<!-- {{ loadpercent }} -->
						<!-- HeyUI进度条 -->
						<Progress v-show="loadpercent_int" :percent="loadpercent_int" color="blue"><span slot="title"></span><span slot="text">{{ loadpercent_int }}%</span></Progress>
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						
					</td>
					<td style="padding:5px;">
						<Button @click="submit" color='blue'>提交</Button>
					</td>
				</tr>
			</table>

			<br>

			<div>
				关注商品列表：
				<Checkbox :datas='goods' v-model="good_value"></Checkbox>

				<br>
				
				<Button @click="flow" color='green'>批量操作</Button>
			</div>
		</div>
	</section>
	
	<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>

// 导包
import myheader from './myheader'
import myfooter from './myfooter'
import { config } from '../config'

export default {
  data () {
    return {
	  msg: "这是一个变量",
	  // 声明面包屑导航
	  datas: [{title: '首页', route: {name: 'index'}}, {title: '我的首页'}],
	  password: '',
	  password1: '',
	  src: '',
	  // 七牛上传凭证
	  uptoken: '',
	  // 视频地址
	  videosrc: '',
	  // 进度展示
	  loadpercent: '',
	  // 整型
	  loadpercent_int : 0,
	  // 切换按钮变量
	  mybutton: '进入画中画',
	  // 商品关注列表
	  goods: [],
	  good_value: [],
	  myid: {}
    }
  },

  // 注册组件
  components: {
	  'myheader': myheader,
	  'myfooter': myfooter,
	  
  },

  mounted:function(){
	  // 发送请求
	  this.axios.get('http://127.0.0.1:8000/userinfo/',
	  {params: {
		  uid: localStorage.getItem('uid')
	  }})
	  .then((result) => {
		  console.log(result);

		  // 赋值操作
		  this.videosrc = 'http://q68kxdp9y.bkt.clouddn.com/' + result.data.img;
	  }) 

	  // 获取uptoken
	  this.get_uptoken();

	  this.get_goods();
  },
  
  methods:{
	  // 批量操作
	  flow: function () {
		console.log(this.good_value);

		var goods = [];

		for(let i = 0, l = this.good_value.length; i < l; i++){
			goods.push(this.myid[this.good_value[i]]);
		}

		// 转为字符串
		var glist = JSON.stringify(this.good_value);
		console.log(glist);

		this.axios.get('http://127.0.0.1:8000/getflow/',{
			params:{
				uid: localStorage.getItem('uid'),
				ids: glist,
				type: 2
			}}).then((result) => {
			console.log(result);
			this.$Message(result.data.message);
		})
	  },

	  // 获取关注商品接口
	  get_goods: function () {
		// 发送请求
		this.axios.get('http://127.0.0.1:8000/uidflow/',{
			params:{
				uid: localStorage.getItem('uid')
			}}).then((result) => {
			console.log(result);
			var goods = [];
			for(let i = 0, l = result.data.length; i<l; i++){
				goods.push(result.data[i].name);
				this.myid[result.data[i].name] = result.data[i].id;
			}
			// 赋值
			this.goods = goods;
			this.good_value = goods;

			console.log(goods);
		})
	  },

	  // 画中画切换
	  changepic: function () {
		  // 判断是否处于画中画界面
		  if (video !== document.pictureInPictureElement){
			  // 尝试进入画中画模式
			  video.requestPictureInPicture();
			  this.mybutton = '退出画中画';
		  } else {
			  // 退出画中画
			  document.exitPictureInPicture();
			  this.mybutton = '进入画中画';
		  }
	  },

	  // 提交
	  submit(){
		  if(this.password==this.password1){
          this.axios({
            url:"http://localhost:8000/changepassword",
            params: {
              uid: localStorage.getItem('uid'),
              password: this.password,
            }
          }).then(res => {
            this.$Message(res.data.message)
          })
        }else {
          this.$Message('两次密码输入不一致,请重新输入')
        }
	  },

	  // 获取七牛云凭证
	  get_uptoken () {
		// 发送请求
		this.axios.get('http://127.0.0.1:8000/uptoken/')
		.then((result) => {
			console.log(result);

			// 赋值操作
			this.uptoken = result.data.token;
		})
	  },

	  // 七牛云上传
	  upload_qiniu: function (e) {
		// 获取文件对象
		let file = e.target.files[0];

		// 声明参数
		let param = new FormData();

		// 将上传凭证添加参数
		param.append('token', this.uptoken);

		// 附件文件
		param.append('file', file);

		// 定制化axios请求
		const axios_qiniu = this.axios.create({withCredentials: false});

		// 发送请求
		axios_qiniu({
			// 声明请求类型
			method: 'POST',
			url: 'http://up-z1.qiniu.com',
			// get->data  post->params
			data: param,
			timeout: 30000,
			onUploadProgress: (e) => {
				// 设置总进度对象 已上传字节 / 总字节
				var complete = (e.loaded / e.total);

				// 安慰剂按钮
				if(complete < 1){
					this.loadpercent = (complete * 100).toFixed(2) + '%';

					this.loadpercent_int = parseInt((complete * 100).toFixed(2));
				}
			}
		}).then(result => {
			console.log(result);

			// 赋值
			this.src = 'http://q68kxdp9y.bkt.clouddn.com/' + result.data.key;

			// 视频地址
			this.videosrc = 'http://q68kxdp9y.bkt.clouddn.com/' + result.data.key;

			// 发送请求
			this.axios.get('http://127.0.0.1:8000/updateuser/',
			{params: {
				uid: localStorage.getItem('uid'),
				img: result.data.key
			}})
			.then((result) => {
				console.log(result);
			}) 

			// 上传成功后，强行100%
			this.loadpercent = '100%';
			this.loadpercent_int = 100;
		})
	  },

	  // 上传头像
	  upload: function (e) {
		// 获取文件对象
		let file = e.target.files[0];

		// 声明参数
		let param = new FormData();

		// 添加文件
		param.append('file', file, file.name);

		// 声明请求头
		let config = {headers: {'Content-Type': 'multipart/form-data'}};

		// 发送请求
		this.axios.post('http://127.0.0.1:8000/uploadfile/', param, config)
		.then((result) => {
			console.log(result);

			// 赋值操作
			this.src = 'http://127.0.0.1:8000/static/upload/' + result.data.filename;
		}) 
	}
     
  }
}


</script>
 
<style>



</style>